<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .ma-co{
            display: flex;
            justify-content: space-between;
            width: 738px;
            height: 128px;
            margin-bottom: 30px;
    }
    .iconn{
        width: 100px;
        height: 132px;
        margin-right: 10px;
    }
    .ma-co-ri{
        width: 490px;
        height: 128px;

    }
    .ma-co-rii{
        width: 140px;
        height: 128px;
    }
    .tit{
            height: 24px;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    line-height: 24px;
    margin-bottom: 4px;
    }
    .ma-wbs{
        width: 451px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 12px;
        color: #666666;
    }
    .ma-importance{
        margin-bottom: 8px;
        font-size: 12px;
        width: 450px;
        height: 20px;
        color: #999999;
        display: block;
    }
    .bookinfo{
        width: 451px;
        margin-bottom: 8px;
        height: 20px;
        font-size: 12px;
        color: #999999;
    }
    .now{
            width: 108px;
    height: 40px;
    background: linear-gradient(330deg, #e60000 0, #ff6114 100%);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    line-height: 20px;
    margin-top: 2px;
    }
    .join{
      width: 108px;
    height: 40px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 400;
    color: #696969;
    line-height: 14px;
    }
    .allSearch{
        font-size: 16px;
        color: #333;
        margin: 20px 0;
    }
    .ma-ri-list{
   width: 246px;
   height: 96px;
   margin-bottom: 20px;
    }
    .ma-ri-lists{
        display: flex;
        margin-bottom: 20px;
        justify-content: space-between;
    }
    .ma-ri-lists img{
        width: 72px;
        height: 96px;
    }
    .ma-ri-top{
        font-size: 14px;
        color: #333;
    }

     .ma-ri-md{
  font-size: 12px;
  color: #999999;
    /* margin-bottom: 8px; */
       }
.ri-wbs{
   height: 96px; 
   width: 162px;

 display: flex;
 flex-direction: column;
 justify-content: space-between;
}
.ri-wbs p{
    margin: 0;
}
.nav{
    position:relative;
    left:0;
    height:72px;
    right:0;
    top:0;
    background: #fff;
}
.top{
    width:1200px;
    height:72px;
    margin:0 auto;
    /* background-color:blue; */
    display:flex;
    align-items: center;
    background: #fff;

    .top-img{
        width:164px ;
        height:49px;
    }
    .sorts{
        display:flex;
        margin-left: 34px;
        div{
            font-weight: 500;
            color: #333;
            margin-right: 20px;

            font-size: 14px;
        }
    }
    .search{
        height: 40px;
        background-color: #f6f8fa;
        border-radius: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 16px;
        box-sizing: border-box;
        min-width: 220px;
        max-width: 398px;
        input{
            border: 0;
            height: 40px;
            line-height: 30px;
            font-size: 14px;
            font-weight: 400;
            outline: 0;
            background-color: transparent;
            width: 260px;
        }
        button{
            border: 0;
            outline: 0;
            text-transform: none;
            img{
                width: 20px;
                height: 20px;
                background-color: #f6f8fa;
            }
        }
    }
}
.nav-author{
    display: flex;
    margin-left: 28px;
}
.message,.history,.bookshelf{
    width: 48px;
    height: 48px;
    img{
        width: 20px;
        height: 20px;
        margin-left: 13px;
    }
    p{
        text-align: center;
        color: #333;
        font-size: 12px;
        margin-top: 5px;
    }
}
.user-avatar{
    width: 34px;
    height: 34px;
    background: #f6f8fa;
    margin-left: 22px;
    position: relative;
    background-color: transparent;
}
.user-img{
    width: 34px;
    height: 34px;
    border-radius: 30px;
    transition-duration: .2s;
    left: 0;
    position: absolute;
}
.me{
    width: 102px;
    height: 40px;
    background-color: #f6f8fa;
    border-radius: 8px;
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 14px;
    color: #333;
    margin-left: 20px;
}
</style>
<body style="background-color: #f6f8fa;">
    <div class="nav">
        <div class="top">
            <img class="top-img" src="https://revo.zongheng.com/comm/2024/87d13bef.png">
            <div class="sorts">
                <div onclick="jump()">首页</div>
                <div onclick="jump1()">分类</div>
                <div onclick="jump2()">排行</div>
                <div onclick="jump1()">书库</div>
                <div onclick="jump1()">完本</div>
                <div>下载APP</div>
            </div>
            <div class="search">
                <input type="text" placeholder="无敌天命">
                <button><img src="https://revo.zongheng.com/comm/2024/3696b94d.png"></button>
            </div>
            <div class="nav-author">
                <div class="message">
                    <img src="./img/user-1.png">
                    <p>消息</p>
                </div>
                <div class="history">
                    <img src="./img/user-2.png">
                    <p>历史</p>
                </div>
                <div class="bookshelf">
                    <img src="./img/user-3.png">
                    <p>书架</p>
                </div>
                <div class="me">我要写书</div>
                <div class="user-avatar">
                    <img class="user-img" src="https://static.zongheng.com/userimage/default/image_120_120.gif">
                </div>
            </div>
       </div> 
    </div>
    <div class="main" style="width: 1200px;  background-color: #fff; margin: auto; display: flex; padding-left: 48px; padding-right: 48px; box-sizing: border-box; justify-content: space-between; margin-top: 20px;">
        <div class="ma-le" style="width: 738px;  ">
            
        </div>
        <div class="ma-ri" style="width: 246px; height: 604px; margin-top: 100px;">
   <p class="allSearch">大家都在搜</p>
   <div class="ma-ri-listss">
   </div>
        </div>
    </div>
</body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
let num= window.location.search.split('=')[1]
const ma=document.querySelector('.ma-le')
fetch(`https://search.zongheng.com/search/book?keyword=${num}&sort=null&pageNo=1&pageNum=20&isFromHuayu=0`).then(res=> res.json()).then(res1=> {
    // console.log(res1.data.datas.list)
    res1.data.datas.list.forEach(item=> {
        //  console.log(item.coverUrl)
        ma.innerHTML+=`
            <div class="ma-co">
                <img classs="iconn" src="https://static.zongheng.com/upload/${item.coverUrl}" alt=""  onclick="ju()">
                <div class="ma-co-ri">
                    <div class="tit"   onclick="ju()">${item.name}</div>
                    <div class="bookinfo" style="display:flex ;">
                        <div  onclick="diji()">${item.authorName}</div>
                        <em>|</em>
                        <div>${item.cateFineName}</div>
                        <em>|</em>
                        <div>${item.serialStatus=1?'连载中':'已完结'}</div>
                        <em>|</em>
                        <div>${item.totalWord}字</div>
                    </div>
                    <p class="ma-wbs">
                        ${item.description}
                    </p>
                    <p class="ma-importance">关键词：${item.keyword}</p>
                </div>
                <div class="ma-co-rii">
                    <div class="now"    onclick="ju()">立即阅读</div>
                    <div class="join">加入书架</div>
                </div>
            </div>
        `
    })
     console.log(res1.data.recDataList)
     const listss=document.querySelector('.ma-ri-listss')
     res1.data.recDataList.forEach(item=> { 
        listss.innerHTML+=`
            <div class="ma-ri-list">
                <div class="ma-ri-lists">
                    <img src="https://static.zongheng.com/upload/${item.imageUrl}" alt=""   onclick="ju()">
                    <div class="ri-wbs">
                        <p class="ma-ri-top"  onclick="ju()">${item.bookName}</p>
                        <p class="ma-ri-md"><span onclick="diji()">${item.authorName} </span><em>|</em>${item.cateName}</p>
                        <p class="ma-wbs" style="width: 162px; margin-bottom: 8px;">${item.description}</p>
                    </div>
                    </div>
        </div>
        `
     })
}).catch(err=>{
    console.log(err)
})

jump=()=>{
    window.location.href='index.html'
}
jump1=()=>{
    window.location.href='bookstock.html'
}
jump2=()=>{
    window.location.href='naodongxingqiu_paihang.html'
}

diji=()=>{
    window.location.href='naodongxingqiu_author.html'
}
ju=()=>{
    console.log(9999)
    window.location.href='detail.html'
}

</script>
</html>